[DataGrid] Use event.defaultMuiPrevented to prevent the default behavior #2179

m4theushw · 2021-07-21T01:15:34Z

Breaking changes

[DataGrid] Replace event.stopPropagation() with event.defaultMuiPrevented = true in all callback props.

Previously, calling event.stopPropagation would stop the propagation of an event and also prevent its the default behavior from running. Now, these two actions can be controlled independently:
- Set event.defaultMuiPrevented to true to prevent the default action of an event
- Call event.stopPropagation to stop an event from propagating to parent elements
```
<DataGrid
  onCellDoubleClick={(params, event) => {
-   event.stopPropagation();
+   event.defaultMuiPrevented = true;
  }}
/>
```

[XGrid] Replace event.stopPropagation() with event.defaultMuiPrevented = true in all event listeners.

apiRef.current.subscribeEvent('cellDoubleClick', (params, event) => {
- event.stopPropagation();
+ event.defaultMuiPrevented = true;
});

For more information, check this page.

Closes #1403

Preview: https://deploy-preview-2179--material-ui-x.netlify.app/components/data-grid/events/#disabling-the-default-behavior

TODO

Add section in https://material-ui.com/components/data-grid/events/
Remove all event.isPropagationStopped()
Improve the definition of MuiEvent
List the breaking changes

docs/src/pages/components/data-grid/events/events.md

oliviertassinari · 2021-07-22T23:34:24Z

packages/grid/_modules_/grid/models/gridOptions.tsx

@@ -206,139 +206,166 @@ export interface GridOptions {
  /**
   * Callback fired when the edit cell value changes.
   * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
-   * @param {React.SyntheticEvent} event The event that caused this prop to be called.
+   * @param {MuiEvent} event The event that caused this prop to be called.


Suggested change

* @param {MuiEvent} event The event that caused this prop to be called.

* @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.

? x the other

I would personally be fine if I had to do this in my codebase.:

(event as any).defaultMuiPrevented = true;

Suggested change

* @param {MuiEvent} event The event that caused this prop to be called.

* @param {React.SyntheticEvent} event The event that caused this prop to be called.

but I can understand if we don't like this idea 😆

We started to use this MuiEvent. Would be nice to keep it, because of the special property. Sometimes using it can lead to terrible typings when the event can be fired both by a synthetic event as well as by a native event, e.g. MuiEvent<React.MouseEvent | DocumentEventMap['click']>.

packages/storybook/src/stories/grid-rows.stories.tsx

docs/src/pages/components/data-grid/events/events.md

m4theushw · 2021-07-23T00:03:39Z

docs/src/pages/components/data-grid/events/events.md

@@ -8,7 +8,7 @@ title: Data Grid - Events

 ## Subscribing to events


This page is not good. My idea is to remove the Pro badge from the page and move it to this section only. Then, add a new section only for the event props, e.g. onCellClick, explaining that they are like subscribing to events but with less granularity. For the catalog of events, I want to improve the docs generator to include a third column with the event prop that is mapped to each event name. I think that with our convention GRID_CELL_CLICK -> onCellClick I can discover the mappings. cc @oliviertassinari

docs/src/pages/components/data-grid/editing/editing.md

packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts

dtassone · 2021-07-23T10:57:17Z

packages/grid/_modules_/grid/hooks/root/useApi.ts

+      params: any,
+      event: MuiEvent<React.SyntheticEvent | DocumentEventMap[keyof DocumentEventMap] | {}> = {},
+    ) => {
+      event.defaultMuiPrevented = false;


if we set event.defaultMuiPrevented = true; and then publish then it will be reset here and be published.
Why not check defaultMuiPrevented everywhere there isPropagationStopped

We still want the event to be published. Only the listeners should not run if event.defaultMuiPrevented is true.

dtassone · 2021-07-23T11:00:03Z

packages/grid/_modules_/grid/hooks/root/useGridApiEventHandler.ts

@@ -12,7 +13,15 @@ export function useGridApiEventHandler(

  React.useEffect(() => {
    if (handler && eventName) {
-      return apiRef.current.subscribeEvent(eventName, handler, options);
+      const enhancedHandler = (


that could go out of this scope in a separate function. Not sure about redefining the handler as it changes the ref of the handler func potentially breaking immutability if (handler === otherHandler) 🤔

We don't have any place where we compare the handler that is actually passed to subscribeEvent. I mean, compare the handler with the one that is saved in the event emitter. The ref would not change.

Another approach would be to move the event.defaultMuiPrevented validation to the event emitter, which is a very low level way to do it.

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

m4theushw added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request labels Jul 21, 2021

m4theushw force-pushed the prevent-default-behavior branch from 01ce81c to bed8472 Compare July 21, 2021 01:18

m4theushw added the breaking change label Jul 21, 2021

m4theushw force-pushed the prevent-default-behavior branch 3 times, most recently from 66c07f1 to f361c79 Compare July 22, 2021 21:32

allow to prevent default behavior

d2030d0

m4theushw force-pushed the prevent-default-behavior branch from f361c79 to d2030d0 Compare July 22, 2021 21:43

m4theushw marked this pull request as ready for review July 22, 2021 22:19

m4theushw requested review from dtassone, DanailH, oliviertassinari and flaviendelangle July 22, 2021 22:45

oliviertassinari reviewed Jul 22, 2021

View reviewed changes

m4theushw commented Jul 23, 2021

View reviewed changes

dtassone reviewed Jul 23, 2021

View reviewed changes

docs/src/pages/components/data-grid/editing/editing.md Show resolved Hide resolved

dtassone reviewed Jul 23, 2021

View reviewed changes

packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts Show resolved Hide resolved

dtassone reviewed Jul 23, 2021

View reviewed changes

m4theushw and others added 8 commits July 23, 2021 20:40

Update docs/src/pages/components/data-grid/events/events.md

2dca6f0

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

Update docs/src/pages/components/data-grid/events/events.md

edeb72c

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

update event definition in the jsdoc

ea34edc

type all event arguments with MuiEvent

9e6bc3a

Merge branch 'master' into prevent-default-behavior

4327c11

onPageChange and onPageSizeChange don't have event

cd61aba

Merge branch 'master' into prevent-default-behavior

a238f75

Merge branch 'master' into prevent-default-behavior

84d3173

m4theushw merged commit 08dab61 into mui:master Jul 28, 2021

m4theushw deleted the prevent-default-behavior branch July 28, 2021 22:10

This was referenced Jul 30, 2021

[DataGrid] Fix docs, add missing onCellFocusOut #2146

Closed

[DataGrid] Drop autoFocus #2239

Merged

flaviendelangle mentioned this pull request Nov 16, 2021

[DataGridPro] Type the event publisher and listener #3022

Merged

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Use event.defaultMuiPrevented to prevent the default behavior #2179

[DataGrid] Use event.defaultMuiPrevented to prevent the default behavior #2179

m4theushw commented Jul 21, 2021 •

edited

Loading

oliviertassinari Jul 22, 2021

m4theushw Jul 24, 2021

m4theushw Jul 23, 2021

dtassone Jul 23, 2021

m4theushw Jul 24, 2021

dtassone Jul 23, 2021

m4theushw Jul 24, 2021

	* @param {MuiEvent} event The event that caused this prop to be called.
	* @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.

	* @param {MuiEvent} event The event that caused this prop to be called.
	* @param {React.SyntheticEvent} event The event that caused this prop to be called.

		@@ -8,7 +8,7 @@ title: Data Grid - Events

		## Subscribing to events

[DataGrid] Use event.defaultMuiPrevented to prevent the default behavior #2179

[DataGrid] Use event.defaultMuiPrevented to prevent the default behavior #2179

Conversation

m4theushw commented Jul 21, 2021 • edited Loading

Breaking changes

oliviertassinari Jul 22, 2021

Choose a reason for hiding this comment

m4theushw Jul 24, 2021

Choose a reason for hiding this comment

m4theushw Jul 23, 2021

Choose a reason for hiding this comment

dtassone Jul 23, 2021

Choose a reason for hiding this comment

m4theushw Jul 24, 2021

Choose a reason for hiding this comment

dtassone Jul 23, 2021

Choose a reason for hiding this comment

m4theushw Jul 24, 2021

Choose a reason for hiding this comment

m4theushw commented Jul 21, 2021 •

edited

Loading